<template>
  <div class="home"> 
    <div class="van-hairline--bottom col-item">
 
      <div class="van-multi-ellipsis--l5">
        <p>
           一直想做手机h5通用vue项目，看了很多优秀的开源项目但是发现没有合适自己的。于是在休息时间，利用Vant开源移动端组件库造了个轮子。特点：利用json mock数据，基本可以做到很少代码侵入来完成与后端接口的对接。前端代码封装过后十分精简易上手，出错概率低。系统会陆续更新一些实用功能。
        </p>
        <p>
          <b>当前版本:</b> <span><van-tag round type="primary">v {{ version }}</van-tag></span>
        </p>
        <p>
          <b>技术支持:</b> <span><van-tag round type="primary">574427343@qq.com</van-tag></span>
        </p>
      </div>
    </div> 
    <div class="van-hairline--bottom col-item">
      <p>
        <span>&yen;免费开源</span>
      </p>
      <p>
        <van-button round type="primary" size="mini" @click="goTarget('https://gitee.com/ldhnet')">访问码云</van-button>
        <van-button round type="primary" size="mini" @click="goTarget('https://gitee.com/ldhnet')">预览入口</van-button> 
      </p>
    </div>
  
    <div >
      <span>捐赠支持</span> <br>
      <span style="display: inline-block; height: 30px; line-height: 30px"><van-icon name="smile-o" />你可以请作者喝杯咖啡表示鼓励</span> 
    </div>
    <div>
      <img class="wxpay-poster" src="@/assets/img/wxpay.png" /> 
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { Toast } from 'vant'
const version = "2.1.0";
const goTarget = (href: string) => {
  window.open(href, "_blank");
}
onMounted(()=>{  
  Toast.loading({ message: '加载中...',type: "loading"});
  setTimeout(() => {
    Toast.clear();
  }, 200);  
})


</script>

<style scoped lang="scss"> 
.home {  
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #676a6c;
  overflow-x: hidden; 
  overflow-y: scroll;
  padding: 10px 20px;  
  .col-item {
    margin-bottom: 20px;
  } 
  .textcenter {
    position: absolute; // 绝对定位
    left: 50%; 
  	transform: translate(-50%,-50%);
  } 
  p {
    margin-top: 10px; 
    b {
      font-weight: 700;
    }
  } 
}
.wxpay {
  &-poster {
    width: 70%;
    height: 70%;
    display: block;
  }
}
</style> 